<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		width: 200px;
		border: 4px solid #ccc;
		border-radius: 4px;
		overflow: hidden;
	}
	input {
		width: 45px;
		height: 45px;
		border: 4px solid #ccc;
		border-radius: 4px;
		float: left;
		margin: 4px 0 4px 4px;
}
	#i1{
	/* 修改文本框的尺寸  
	文本框所占宽高受边框影响 
	按钮则不受边框影响 */
		height: 37px;
		width: 135px;
		padding: 0;/* 去掉默认的外边距 */
	}
</style>
<script type="text/javascript">
function myfn(str){
	if(str=="C"){
		i1.value="";
	}else if(str=="="){
		//取出文本框中的值 进行计算
		i1.value = eval(i1.value);
	}else{//数字和运算符
		//把按钮对应的值显示到文本框中
		i1.value+=str;
	}
}
</script>
</head>
<body>
<div>
	<input type="text" readonly="readonly" 
	id="i1">
	<input type="button" value="C" 
	onclick="myfn('C')">
	<input type="button" value="7" 
	onclick="myfn('7')">
	<input type="button" value="8" 
	onclick="myfn('8')">
	<input type="button" value="9" 
	onclick="myfn('9')">
	<input type="button" value="/" 
	onclick="myfn('/')">
	<input type="button" value="4" 
	onclick="myfn('4')">
	<input type="button" value="5" 
	onclick="myfn('5')">
	<input type="button" value="6" 
	onclick="myfn('6')">
	<input type="button" value="*" 
	onclick="myfn('*')">
	<input type="button" value="1" 
	onclick="myfn('1')">
	<input type="button" value="2" 
	onclick="myfn('2')">
	<input type="button" value="3" 
	onclick="myfn('3')">
	<input type="button" value="-" 
	onclick="myfn('-')">
	<input type="button" value="0" 
	onclick="myfn('0')">
	<input type="button" value="." 
	onclick="myfn('.')">
	<input type="button" value="=" 
	onclick="myfn('=')">
	<input type="button" value="+" 
	onclick="myfn('+')">
</div>
</body>
</html>




